import React, { useState } from 'react';
import { Row, Col, Button, Cascader, Table } from 'antd';
import { FileOutlined } from '@ant-design/icons';
import '../../../assets/css/Sale/OrderList/OrderForm.css'

import axios from '../../../utils/axios'
import Orderapi from '../../../api/Sale/DDLB'

const options = [
    {
        value: 'zhejiang',
        label: 'Zhejiang',
    },
    {
        value: 'jiangsu',
        label: 'Jiangsu',
    },
];


const OrderArr = [];

const Ordercolumns = [
    {
        title: '编号',
        dataIndex: 'id',
    },
    {
        title: '销售类型',
        dataIndex: 'salestype',
    },
    {
        title: '合计金额',
        dataIndex: 'totalamount',
    },
    {
        title: '创建日期',
        dataIndex: 'creationdate',
    },
    {
        title: '订单类型',
        dataIndex: 'ordertype',
    },
    {
        title: '客户类型',
        dataIndex: 'customertype',
    },
    {
        title: '客户名称',
        dataIndex: 'customername',
    },
    {
        title: '业务员',
        dataIndex: 'salesman',
    },
    {
        title: '出库仓库',
        dataIndex: 'exwarehouse',
    },
    {
        title: '配送车辆',
        dataIndex: 'deliveryvehicle',
    },
    {
        title: '操作',
        dataIndex: 'operation',
    },

];
const Orderdata = [];


commodityPaging();
function commodityPaging() {
    return new Promise((resolve, reject) => {
        axios({
            method: "post",
            url: Orderapi.getorder
        }).then(res => {
            OrderArr.splice(0, OrderArr.length)
            OrderArr.push(...res.data.data)
            console.log(OrderArr);
            Orderdata.splice(0, Orderdata.length)
            for (let i = 0; i < OrderArr.length; i++) {
                Orderdata.push({
                    id: OrderArr[i][0],
                    salestype: OrderArr[i][1],
                    totalamount: OrderArr[i][2],
                    creationdate: OrderArr[i][3],
                    ordertype: OrderArr[i][4],
                    customertype: OrderArr[i][5],
                    customername: OrderArr[i][6],
                    salesman: OrderArr[i][7],
                    exwarehouse: OrderArr[i][8],
                    deliveryvehicle: OrderArr[i][9],
                    operation:
                        <div id='Operation'>
                            <Button type="text" className='tableOperation'>编辑</Button>
                            <Button type="text" className='tableOperation'>预览</Button>
                            <Button type="text" className='tableOperation'>删除</Button>
                        </div>
                });
            }
        }).catch(err => {
            reject(err)
        })
    })
}


function OrderForm() {

    const [selectedRowKeys, setSelectedRowKeys] = useState([]);

    const onSelectChange = (newSelectedRowKeys) => {
        setSelectedRowKeys(newSelectedRowKeys);
    };

    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };


    return (
        <div id='orderForm'>
            <Row className='FormSwitch'>
                <Col span={6}>
                    <span className='icon'><FileOutlined /></span>
                    <span>数据列表</span>
                </Col>
                <Col span={8} offset={10}>
                    <Button type="primary" className='FormBtn'>添加</Button>
                    <Button className='FormBtn'>导出</Button>
                    <Cascader className='FormBtn' options={options} placeholder="显示条数" />
                    <Cascader className='FormBtn' options={options} placeholder="排序方式" />
                </Col>
            </Row>
            {/* 表格 */}
            <Table rowSelection={rowSelection} columns={Ordercolumns} dataSource={Orderdata} />
        </div>
    )
}

export default OrderForm